<template>
  <div class="spe_detail">
    <my-header>
      <template #left>
        <van-icon name="arrow-left" @click="$router.back()" />
      </template>
      <template #center> 专栏详情 </template>
    </my-header>
    <div class="content">
       <h3>{{detail.title}}</h3>
       <img :src="detail.pic" alt="">
       <div v-html="detail.content"></div>
    </div>
    <my-like></my-like>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import myHeader from "../../components/myHeader.vue";
import { getNewsDetail } from '../../api/secendPage/index';
import { useRoute } from 'vue-router';
import MyLike from '../../components/myLike.vue';
export default {
  components: { myHeader, MyLike },
  setup() {
    const { query } = useRoute();
    let id = query.id;
    const data = reactive({
      detail:{},
    })
    getNewsDetail({id:id}).then(res => {
        data.detail = res.data
    })
    return{
      ...toRefs(data)
    }
  },
};
</script>
<style lang="scss" scoped>
.spe_detail {
  height: 100%;
  .content{
    height: calc(100% - 50px);
    overflow: auto;
    padding: 0 15px;
    h3{
        text-align: center;
        margin: 30px auto 15px;
    }
    img{
      width: 100%;
    }
    :deep(p){
      font-size: 16px;
      color: #333;
      line-height: 40px;
      text-indent: 32px;
    }
  }
}
</style>